<template>
  <div class="app-container">
      <!--科室下拉框查询-->
      <el-form :model="queryParams" ref="queryForm" :rules="rulesQuery" :inline="true" v-show="showSearch" label-width="80px" align="center">
        <el-form-item label="科室选择" prop="deptId">
          <el-select v-model="queryParams.deptId" placeholder="科室选择" @change="handleQuery" filterable clearable size="small">
            <el-option
              v-for="item in deptOptions"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-delete" type="warning" size="mini" @click="empty()">清空</el-button>
        </el-form-item>
      <!--用户排班表-->
      <el-table v-loading="loading" :data="datas" ref="listPowerSupplyTab" border :cell-style="{padding: '0'}" @selection-change="handleSelectionChange" style="width: 1300px;margin-left: 200px" >
        <el-table-column type="selection" width="60" align="center" />
        <el-table-column label="医生名称" align="center" prop="userName" width="120px"/>
        <el-table-column label="星期一上午" align="center" prop="oneUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.oneUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期一下午" align="center" prop="oneDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.oneDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期二上午" align="center" prop="twoUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.twoUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期二下午" align="center" prop="twoDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.twoDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期三上午" align="center" prop="threeUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.threeUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期三下午" align="center" prop="threeDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.threeDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期四上午" align="center" prop="fourUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.fourUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期四下午" align="center" prop="fourDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.fourDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期五上午" align="center" prop="fiveUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.fiveUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期五下午" align="center" prop="fiveDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.fiveDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期六上午" align="center" prop="sixUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.sixUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期六下午" align="center" prop="sixDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.sixDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期日上午" align="center" prop="sevenUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.sevenUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期日下午" align="center" prop="sevenDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox true-label="1" v-model="scope.row.sevenDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="挂号限额" align="center" prop="skLimit" width="110px">
          <template slot-scope="scope">
            <el-form-item>
              <el-input size="mini" v-model="scope.row.skLimit" style="width: 60px" />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-form-item label="规则名称" prop="ruleName" style="margin-left: 400px;margin-top: 20px">
        <el-input
          v-model="queryParams.ruleName"
          placeholder="请输入规则名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="规则描述" prop="description" style="margin-top: 20px">
        <el-input
          v-model="queryParams.description"
          placeholder="请输入规则描述"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <el-button type="danger" icon="el-icon-download" size="mini" @click="close()">取消</el-button>
        <template>
          <el-button type="primary" icon="el-icon-download" size="mini" @click="handleUpdate()">保存排版规则表</el-button>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { listSkd_rule_item } from "@/api/sms/skd_rule_item";
  import { getSkd_rule, addSkd_rule, updateSkd_rule } from "@/api/sms/skd_rule";
  import { listDept } from "@/api/sms/dept";
  import { listUserBySkdFlag } from "@/api/sms/user";

  export default {
    name: "Skd_rule_item",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        data: [
          {id: null,
            userId: '0',  //用户id
            userName:null,  //用户名
            skLimit:null,  //挂号限额
            daysOfWeek:[],//排班时间
            oneUp:null,
            oneDown:null,
            twoUp:null,
            twoDown:null,
            threeUp:null,
            threeDown:null,
            fourUp:null,
            fourDown:null,
            fiveUp:null,
            fiveDown:null,
            sixUp:null,
            sixDown:null,
            sevenUp:null,
            sevenDown:null,
          }
        ],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 新增排版规则表格数据
        datas: [],
        // 默认选中复选项
        datasTab:[],
        // 弹出层标题
        title: "",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deptId: null
        },
        // 科室选项
        deptOptions: [],
        // 表单参数
        form:{},
        // 表单校验
        rulesQuery:{
          deptId: [
            { required: true, message: "请选择科室", trigger: "blur" }
          ],
          ruleName: [
            { required: true, message: "规则名称不能为空", trigger: "blur" }
          ],
          description: [
            { required: true, message: "规则描述不能为空", trigger: "blur" }
          ],
        },
      };
    },
    created() {
      let thi = this;
      this.data.length = 0;
      let skRuleId = thi.$route.query.id;//获取规则id
      if(skRuleId>0){
        getSkd_rule(skRuleId).then(response => {
          thi.queryParams = response.data;
        });
        thi.loading = true;
        thi.form.skRuleId = skRuleId;
        listSkd_rule_item(thi.form).then(response => {
          thi.datasTab = response.rows;
          setTimeout(function () {
            thi.$nextTick(() => {
              for (let i = 0; i < thi.datas.length; i++){
                for (let j = 0; j < thi.datasTab.length; j++){
                  if(thi.datasTab[j].userId == thi.datas[i].userId){
                    thi.$refs.listPowerSupplyTab.toggleRowSelection(thi.datas[i],true);
                    thi.datas[i].skLimit = thi.datasTab[j].skLimit;
                    if(thi.datasTab[j].daysOfWeek[0] == 1){ thi.datas[i].oneUp = true; }
                    if(thi.datasTab[j].daysOfWeek[1] == 1){ thi.datas[i].oneDown = true; }
                    if(thi.datasTab[j].daysOfWeek[2] == 1){ thi.datas[i].twoUp = true; }
                    if(thi.datasTab[j].daysOfWeek[3] == 1){ thi.datas[i].twoDown = true; }
                    if(thi.datasTab[j].daysOfWeek[4] == 1){ thi.datas[i].threeUp = true; }
                    if(thi.datasTab[j].daysOfWeek[5] == 1){ thi.datas[i].threeDown = true; }
                    if(thi.datasTab[j].daysOfWeek[6] == 1){ thi.datas[i].fourUp = true; }
                    if(thi.datasTab[j].daysOfWeek[7] == 1){ thi.datas[i].fourDown = true; }
                    if(thi.datasTab[j].daysOfWeek[8] == 1){ thi.datas[i].fiveUp = true; }
                    if(thi.datasTab[j].daysOfWeek[9] == 1){ thi.datas[i].fiveDown = true; }
                    if(thi.datasTab[j].daysOfWeek[10] == 1){ thi.datas[i].sixUp = true; }
                    if(thi.datasTab[j].daysOfWeek[11] == 1){ thi.datas[i].sixDown = true; }
                    if(thi.datasTab[j].daysOfWeek[12] == 1){ thi.datas[i].sevenUp = true; }
                    if(thi.datasTab[j].daysOfWeek[13] == 1){ thi.datas[i].sevenDown = true; }
                  }
                }
              }
            })
          },1000)
          thi.loading = false;
        })
      }
      /** 延迟加载医生列表 */
      setTimeout(() =>{
        thi.getList();
      },700)
      /** 查询科室 */
      listDept(null).then(response => {
        this.deptOptions = response.rows;
      });
    },
    methods: {
      /** 查询新增排版规则的用户列表 */
      getList() {
        this.loading = true;
        listUserBySkdFlag(this.queryParams).then(response => {
          this.datas = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.reset();
      },
      // 表单重置
      reset() {
        this.queryParams = {
          id: null,
          ruleName:null,
          description:null,
          deptId:null
        };
        this.resetForm("queryForm");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 清空按钮操作 */
      empty() {
        this.datas = null;
        this.$refs.listPowerSupplyTab.clearSelection();
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.data = selection.map(item => item);
        this.single = selection.length!==1;
        this.multiple = !selection.length;
      },
      /** 生成排班规则按钮操作 */
      handleUpdate() {
        this.$refs["queryForm"].validate(valid => {
          if (valid) {
            if(this.data.length == 0){
              this.$message.error('请至少选择一名医生');
              return;
            }
            for(let i = 0; i<this.data.length; i++){
              let days = "";
              this.data[i].oneUp == 1 ? days+="1" : days+="0";
              this.data[i].oneDown == 1 ? days+="1" : days+="0";
              this.data[i].twoUp == 1 ? days+="1" : days+="0";
              this.data[i].twoDown == 1 ? days+="1" : days+="0";
              this.data[i].threeUp == 1 ? days+="1" : days+="0";
              this.data[i].threeDown == 1 ? days+="1" : days+="0";
              this.data[i].fourUp == 1 ? days+="1" : days+="0";
              this.data[i].fourDown == 1 ? days+="1" : days+="0";
              this.data[i].fiveUp == 1 ? days+="1" : days+="0";
              this.data[i].fiveDown == 1 ? days+="1" : days+="0";
              this.data[i].sixUp == 1 ? days+="1" : days+="0";
              this.data[i].sixDown == 1 ? days+="1" : days+="0";
              this.data[i].sevenUp == 1 ? days+="1" : days+="0";
              this.data[i].sevenDown == 1 ? days+="1" : days+="0";
              this.data[i].daysOfWeek = days;//排班时间
              if(!this.data[i].daysOfWeek.includes("1")){// 1不存在
                this.$message.error('请选择给 “"'+this.data[i].userName+'"” 至少一个上班时间！');
                return;
              }else if(this.data[i].skLimit == null ){
                this.$message.error('请给 “"'+this.data[i].userName+'"” 输入挂号限额！');
                return;
              }
            }
            this.submitForm();
          }
        });
      },
      /** 提交 */
      submitForm() {
        this.queryParams.smsSkdRuleItems = this.data;
        console.log(this.queryParams.smsSkdRuleItems.length);
        if (this.queryParams.id != null) {
          updateSkd_rule(this.queryParams).then(response => {
            if (response.code === 200) {
              this.msgSuccess("修改成功");
              this.$store.dispatch("tagsView/delView", this.$route);
              this.$router.push("/sdk/skd_rule");
            }
          });
        } else {
          addSkd_rule(this.queryParams).then(response => {
            if (response.code === 200) {
              this.msgSuccess("新增成功");
              this.$store.dispatch("tagsView/delView", this.$route);
              this.$router.push("/sdk/skd_rule");
            }
          });
        }
      },
      //取消，回退页面操作
      close(){
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push("/sdk/skd_rule");
      },
    }
  };
</script>
